<template>
  <div class="team-manager-div">
    <template v-if="!isCreatedReport">
      <a-card :bordered="false" :loading="loading">
        <a-empty :description="false" :image-style="{ height: '500px' }">
          <img slot="image" src="~@/assets/report-empty.png" alt="暂无报告" />
          <a-button type="primary" @click="createFirstReport" :loading="createLoading">
            生成首诊报告
          </a-button>
        </a-empty>
      </a-card>
    </template>
    <template v-else>
      <a-card title="" :bordered="false">
        <a-page-header
          style="border-bottom: 1px solid rgb(235, 237, 240)"
          :title="report.reportName"
          :sub-title="'报告时间：' + report.reportCreateTime"
        >
          <template slot="extra">
            <a-popconfirm placement="topLeft" ok-text="确定" cancel-text="取消" @confirm="removeFirstReport">
              <template slot="title">
                <p>你确定要删除这篇报告吗？</p>
              </template>
              <a-button style="margin-left: 30px" :loading="deleteLoading">删除报告</a-button>
            </a-popconfirm>
            <a-button key="打印报告" type="primary" @click="printReport">
              打印报告
            </a-button>
          </template>
        </a-page-header>
        <div :style="{ marginTop: '15px' }" ref="printReport">
          <basic-info
            :report="report.patientArchive"
            v-if="!isNullObject(report.patientArchive.basicInfo)"
          ></basic-info>
          <service-programme :report="report.patientServiceProgramme"></service-programme>
          <signin-plan
            :report="report.patientServiceProgramme.signinPlan"
            v-if="!isNullObject(report.patientServiceProgramme.signinPlan)"
          ></signin-plan>
          <target
            :report="report.patientServiceProgramme"
            v-if="report.patientServiceProgramme.targetName || report.patientServiceProgramme.targets"
          ></target>
          <life-style
            :report="report.patientArchive.lifewayReport"
            v-if="!isNullObject(report.patientArchive.lifewayReport)"
          ></life-style>
          <overview
            :report="report.patientArchive.overviewReport"
            v-if="!isNullObject(report.patientArchive.overviewReport)"
          ></overview>
          <education
            :report="report.patientArchive.educationReport"
            v-if="!isNullObject(report.patientArchive.educationReport)"
          ></education>
          <complication
            :report="report.patientArchive.complicationReport"
            v-if="!isNullObject(report.patientArchive.complicationReport)"
          ></complication>
          <comorbidity
            :report="report.patientArchive.comorbidityReport"
            v-if="!isNullObject(report.patientArchive.comorbidityReport)"
          ></comorbidity>
          <anamnesis
            :report="report.patientArchive.anamnesisReport"
            v-if="!isNullObject(report.patientArchive.anamnesisReport)"
          ></anamnesis>
          <physical
            :report="report.patientArchive.physicalReport"
            v-if="!isNullObject(report.patientArchive.physicalReport)"
          ></physical>
          <laboratory
            :report="report.patientArchive.laboratoryReport"
            v-if="!isNullObject(report.patientArchive.laboratoryReport)"
          ></laboratory>
          <iconography
            :report="report.patientArchive.iconographyReport"
            v-if="!isNullObject(report.patientArchive.iconographyReport)"
          ></iconography>
          <evaluation :report="report.patientEvaluation" v-if="!hasEva"></evaluation>
        </div>
        <print-report ></print-report>
        <a-row>
          <a-col :span="4" :offset="16">
            <div :style="{ fontSize: '16px', margin: '25px 0 5px 0', fontWeight: 600 }">
              <span style="">制表人：{{ report.creator }}</span>
            </div>
          </a-col>
          <a-col :span="4">
            <div :style="{ fontSize: '16px', margin: '25px 0 5px 0', fontWeight: 600 }">
              <span>日期：{{ report.reportCreateTime }}</span>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </template>
  </div>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction, deleteAction } from '@/api/manage'
import BasicInfo from './modules/First/BasicInfo.vue'
import ServiceProgramme from './modules/First/ServiceProgramme.vue'
import SigninPlan from './modules/First/SigninPlan.vue'
import Target from './modules/First/Target.vue'
import LifeStyle from './modules/First/LifeStyle.vue'
import Overview from './modules/First/Overview.vue'
import Education from './modules/First/Education.vue'
import Complication from './modules/First/Complication.vue'
import Comorbidity from './modules/First/Comorbidity.vue'
import Anamnesis from './modules/First/Anamnesis.vue'
import Physical from './modules/First/Physical.vue'
import Laboratory from './modules/First/Laboratory.vue'
import Iconography from './modules/First/Iconography.vue'
import Evaluation from './modules/First/Evaluation.vue'
import PrintReport from './modules/PrintReport/PrintReport.vue'
import print from '@/utils/print'

export default {
  name: 'First',
  components: {
    BasicInfo,
    ServiceProgramme,
    SigninPlan,
    Target,
    LifeStyle,
    Overview,
    Education,
    Comorbidity,
    Complication,
    Anamnesis,
    Physical,
    Laboratory,
    Iconography,
    Evaluation,
    PrintReport
  },
  data() {
    return {
      loading: true,
      createLoading: false,
      deleteLoading: false,
      url: {
        getFirstReport: 'patient/report/first',
        createFirstReport: 'patient/report/create',
        removeFirstReport: 'patient/report/remove'
      },
      isCreatedReport: false,
      report: {
        createTime: '2022-3-30 15:14:32'
      }
    }
  },
  computed: {
    hasEva() {
      const obj = this.report.patientEvaluation
      const isEmpty = Object.values(obj).filter(v => {
        return v !== null
      })
      return isEmpty.length == 0
    }
  },
  created() {
    this.getMyFirstReport()
  },
  mounted() {},
  methods: {
    isNullObject(item) {
      const isEmptyList = item && Object.keys(item).filter(n => n.indexOf('Text') > -1)
      const isEmpty =
        isEmptyList &&
        isEmptyList.length != 0 &&
        isEmptyList.every(v => {
          return item[v] == null
        })
      return item == null || Object.keys(item).length == 0 || Object.values(item).length == 0 || isEmpty
    },
    printReport() {
//    this.$message.info('coding')
			print(this.$refs.printReport)
    },
    getMyFirstReport() {
      getAction(this.url.getFirstReport, {
        patientId: this.$route.query[PAGE_MENU_TYPE.PatientId]
      })
        .then(res => {
          if (res.result != null && res.result.dataId) {
            this.isCreatedReport = true
            this.report = res.result
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    createFirstReport() {
      this.createLoading = true
      postAction(this.url.createFirstReport, {
        patientId: this.$route.query[PAGE_MENU_TYPE.PatientId],
        type: 1 // 1-首诊报告，4-总结报告
      })
        .then(res => {
          if (res.success) {
            this.$message.success('首诊报告创建成功')
            this.getMyFirstReport()
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(_ => {
          this.createLoading = false
        })
    },
    removeFirstReport() {
      if (this.report.dataId) {
        this.deleteLoading = true
        deleteAction(this.url.removeFirstReport, {
          id: this.report.dataId
        })
          .then(res => {
            if (res.success) {
              this.$message.success('首诊报告删除成功')
              this.isCreatedReport = false
            } else {
              this.$message.error(res.message)
            }
          })
          .finally(_ => {
            this.deleteLoading = false
          })
      } else {
        this.$message.error('数据异常，无法操作')
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-descriptions-title {
  margin-bottom: 1px;
  background: rgb(245, 34, 45);
  color: rgb(255, 255, 255);
  padding: 20px;
}
/deep/ .ant-descriptions-item-label {
  width: 25%;
}
/deep/ .ant-descriptions-item-content {
  width: 25%;
}
</style>

